<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="container">
    <div>
      <i class="iconfont" :class="[iconMap.get(type)]"></i>
    </div>
    <el-popover
      placement="right"
      width="200"
      trigger="hover"
      :content="name">
      <div slot="reference" class="ellipsis title">{{name}}</div>
    </el-popover>
  </div>
</template>
<script >
export default {
  inject: ["getNode"],
  data() {
    return {
      name: '',
      type: '',
      iconMap: new Map([
        ['system', 'icon--shujubiao'], // 数据来源
        ['table', 'icon-jisuanxieru'], // 模型
        ['dataset', 'icon-shujuji1'], // 数据集
        ['', 'icon-zhibiao'], // 指标
      ])
    }
  },
  created() {
    const currentNode = this.getNode();
    this.name = currentNode.data.name
    this.type = currentNode.data.type
    console.log('currentNode', currentNode.data);
    currentNode.on("change:data", (res) => {
      console.log('接受的数据', res);
    });
  },
}
</script>
<style scoped lang='less'>
.container {
  width: 100%;
  height: 100%;
  text-align: center;
  // background-color: pink;
  .ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .title {
    font-size: 12px;
  }
  .iconfont {
    font-size: 30px;
    color: #138bd6;
  }
}
</style>
